<!--
  评论组件 Demo 抽屉
  t-drawer 为布局用，必须结合 t-layout，并不是传统的抽屉组件
  这里使用 q-dialog 样式和功能上更合适
  注：封装版的 t-dialog 出不来
-->
<template>
  <t-dialog
    v-model:show="drawerVisible"
    position="right"
    full-height
    class="comment-drawer-dialog"
    style="padding: 0"
  >
    <t-card class="full-height overflow-hidden" style="width:450px">
      <t-card-section
        class="comment-drawer-header shadow-sm"
        style="border-bottom: 1px solid lightgray"
      >
        <div class="flex justify-between items-center">
          <div class="text-base">评论</div>
          <t-button icon="close" round dense @click="onCloseDrawer"></t-button>
        </div>
      </t-card-section>

      <TComment
        ref="commentRef"
        :is-mobile="false"
        v-bind="commentOptions"
        showHeader
        :visible="drawerVisible"
        :input-max-length="200"
        is-use-mock
        class=""
        style="height: calc(100% - 66px)"
      />
    </t-card>
  </t-dialog>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import { useQuasar } from '@teld/q-components';

export default defineComponent({
  name: 'comment-drawer',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    /**
     * 应该由页面传入的参数，用于接口参数
     * - pageId
     * - dataId
     * - dimension 可选
     * - commentTitle
     * - commentType 可选
     * - pageUrl
     * 其它参数为 UI 参数，无需从页面获取，直接设即可
     */
    commentOptions: {
      type: Object,
    },
  },
  setup(props, ctx) {
    const $q = useQuasar();
    const { emit } = ctx;
    const drawerVisible = computed({
      get() {
        return props.visible;
      },
      set(v) {
        emit('update:visible', v);
      },
    });
    const commentRef = ref();

    console.log('drawer', props);

    // 经确认发现阻止不了 QDrawer 的关闭
    const beforeHide = evt => {
      console.log('beforeHide');
      evt.preventDefault();
      evt.cancelBubble = true;
      evt.returnValue = false;
      evt.stopPropagation();
      return false;
    };
    // 经确认发现阻止不了 QDrawer 的关闭
    const onHide = evt => {
      console.log('onHide');
      evt.preventDefault();
      evt.cancelBubble = true;
      evt.returnValue = false;
      evt.stopPropagation();
      return false;
    };

    // Drawer 提供的关闭相关事件无法阻止关闭，只能采取单向绑定的方式控制
    const onCloseDrawer = _ => {
      // check dirty
      // drawerVisible.value = false;
      const isDirty = commentRef.value?.checkDirty();
      console.log('isDirty', isDirty);
      if (isDirty) {
        $q.dialog({
          title: '确认',
          message: '如果选择确定关闭，已编辑的内容都将被丢弃。?',
          cancel: true,
          persistent: true,
        })
          .onOk(() => {
            drawerVisible.value = false;
          })
          .onCancel(() => {
            // console.log('>>>> Cancel')
          })
          .onDismiss(() => {
            // console.log('I am triggered on both OK and Cancel')
          });
        return;
      }
      drawerVisible.value = false;
    };

    return {
      drawerVisible,
      commentRef,
      beforeHide,
      onHide,
      onCloseDrawer,
    };
  },
});
</script>

<style lang="scss">
.comment-drawer-dialog {
  .q-dialog__inner--fullheight {
    padding: 0;
  }
}
</style>
